<template>
	<view>
		<view class="comlog">
			<view class="logos">
				<image class="logoimg" src="../../../static/logo.png" mode="widthFix"></image>
			</view>
			<text class="wclz t-c m-t5">高校思政教育教学中心</text>
			<text class="wcl t-c m-t3">南京德教思政科技有限公司</text>
			<view class="sign">
				<view class="sign_t">
					<text class="wc-l1 m-l2">输入手机号：</text>
					<input type="number" placeholder-style="font-size:24upx;" placeholder="输入手机号" v-model="phonenum"
						class="sign_r m-t1">
				</view>
				<view class="sign_t m-t2">
					<text class="wc-l1 m-l2">输入验证码：</text>
					<input type="number" placeholder-style="font-size:24upx;" placeholder="输入验证码" v-model="phonecode"
						class="sign_r m-t1">
				</view>
				<button type="warn" class="wcl m-t2" :disabled="codeShow<=60" @click="getCode()">{{codeShow}}</button>
				<view class="sign_t m-t2">
					<text class="wc-l1 m-l2">输入密码：</text>
					<input type="text" placeholder-style="font-size:24upx;" password="true" v-model="newpassword"
						placeholder="请输入新密码" class="sign_r m-t1">
				</view>
				<view class="sign_t m-t2">
					<text class="wc-l1 m-l2">确认密码：</text>
					<input type="text" placeholder-style="font-size:24upx;" password="true" v-model="renewpassword"
						placeholder="请输入新密码" class="sign_r m-t1">
				</view>
				<button type="warn" class="wcl m-t7" @click="forgetPwd()">确认</button>
			</view>
			<view class="wcl m-t7" style="margin-left:50upx;">
				<checkbox style="transform: scale(0.7);padding:10upx;" @click="isCheckChange"></checkbox>
				我已阅读并同意
				<span style="color: #007AFF;text-decoration:underline" @click="toZhengce()">《隐私政策》</span>和
				<span style="color: #007AFF;text-decoration:underline" @click="toXieyi()">《用户协议》</span>
			</view>

			<view class="logo_bottom">
				<text class="hx"></text>
				<text class="wc-l1 w-ywh">注册账号</text>
				<text class="hx"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCheck: false,
				token: '',
				newpassword: '',
				renewpassword: '',
				codeShow: '获取验证码',
				phonecode: '',
				phonenum: '',
			}
		},
		methods: {
			isCheckChange() {
				let that = this;
				that.isCheck = !that.isCheck;
			},


			toZhengce() {
				uni.navigateTo({
					url: './zhengce'
				})
			},
			toXieyi() {
				uni.navigateTo({
					url: './xieyi'
				})
			},
			forgetPwd() {
				let that = this;
					if(that.isCheck==false){
						uni.showToast({
							icon:"none",
							title:"请勾选同意后再注册"
						})
						return;
					}
				that.pyReq(that.$http.registerAccount, {
					phone: that.phonenum,
					code: that.phonecode,
					password: that.newpassword,
					repassword: that.renewpassword
				}, function(res) {
					setTimeout(() => {
						uni.navigateBack({

						})
					}, 1000);
				});
			},
			getCode() {
				let that = this;
				that.pyReq(that.$http.getCode, {
					phonenum: that.phonenum,
					type: 1
				}, function(res) {
					that.codeShow = 60;
					let codeInter = setInterval(() => {
						that.codeShow -= 1;
						if (that.codeShow == 0) {
							that.codeShow = "获取验证码";
							clearInterval(codeInter);
						}
					}, 1000);
				});
			},
			tz() {
				let that = this
				let params = {
					"oldPasswd": that.oldPasswd,
					"newPasswd": that.newPasswd,
					"reNewPasswd": that.reNewPasswd
				}
				that.pyReq(that.$http.registerAccount, params, function(res) {
					uni.setStorageSync('token', res.result);
					uni.reLaunch({
						url: '/pages/index/index'
					})

				});
			},

		},
		created() {
			console.log(this.$http.login)
		}

	}
</script>

<style>
	.sign_t {
		position: relative;
	}

	.sign_t input::-webkit-input-placeholder {
		font-size: 14upx;
	}

	.verification {
		position: absolute;
		right: 0;
		top: 10upx;
		font-size: 15upx;
		color: #BA2B26;
		width: 159upx;
		height: 50upx;
		line-height: 44upx;
		padding: 0;
		background: none;
		border: 1upx #BA2B26 solid;
		border-radius: 30upx;
	}

	.comlog {
		width: 100%;
	}

	.logos {
		width: 162upx;
		height: 224upx;
		/* border: 1upx dashed #333333; */
		margin: 0 auto;
		margin-top: 130upx;
	}

	.logoimg {
		width: 162upx;
		display: block;
	}

	.t-c {
		display: block;
	}

	.sign {
		width: 420upx;
		margin: 0 auto;
		margin-top: 100upx;
	}

	.sign_t {
		border-radius: 10upx;
		border: 1upx solid #AEAEAE;
		display: flex;
		height: 66upx;
	}

	.wc-l1 {
		width: 310upx;
		color: #969696;
		line-height: 66upx;
		font-size: 24upx;
		text-align: right;
	}

	.sign_r {
		width: 500upx;
		font-size: 24upx;
		margin-top: 16upx;
	}

	.logo_bottom {
		width: 420upx;
		margin: 0 auto;
		margin-top: 100upx;
		display: flex;
		justify-content: space-between;
	}

	.w-ywh {
		text-align: center;
	}

	.hx {
		width: 140upx;
		height: 2upx;
		background-color: #E0E0E0;
		margin-top: 35upx;
	}
</style>
